<template>
  <div class="postBox">
    <div class="lf">
      <!-- 城市类型的选择栏 -->
      <div class="xuanzlan">
        <cities v-if="psCtdata.length" :psCtdata="psCtdata" @chenshi="chenshi" />
      </div>
      <!-- 推荐城市 -->
      <div class="tuijian">
        <h4 class="title">推荐城市</h4>
        <nuxt-link to="/post">
          <!-- <img :src="$axios.defaults.baseURL+'/images/pic_sea.jpeg'" /> -->
          <img src="@/static/pic_sea.jpeg" />
        </nuxt-link>
      </div>
    </div>
    <div class="rg">
      <!-- 搜索框 -->
      <div class="daohan">
        <div>
          <input type="text" placeholder="请输入想的地方，比如：'广州'" v-model="dizhi" @keydown.13="getCity" />
          <i class="el-icon-search" @click="getCity"></i>
        </div>
        <!-- 推荐 -->
        <div class="tj">
          推荐：
          <span
            class="tj-content"
            v-for="(item,index) in ipCity"
            :key="index"
            @click="xuanzCity(index)"
          >{{item}}</span>
        </div>
      </div>
      <!-- 文章详情  -->
      <div class="gonglue">
        <div class="gl-header">
          <h4 class="gl-title">推荐攻略</h4>
          <el-button type="primary" class="button" @click="$router.push('post/create')">
            <i class="el-icon-edit"></i> 写游记
          </el-button>
        </div>
        <!-- 文章 -->
        <textContent v-for="(item,index) in textData.data" :key="index" :textData="item" />
        <div v-if="!textData.total" class="tishi">还没有{{dizhi}}的攻略！期待你的发布</div>
      </div>
      <!-- 分页 -->
      <el-pagination
        layout="total,sizes,prev, pager, next,jumper"
        :page-sizes="[3,5,10]"
        :page-size="pageSize"
        :total="textData.total"
        :current-page.sync="page1"
        @current-change="dianji"
        @size-change="newpageS"
        class="fengye"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
import cities from "@/components/post/cities";
import textContent from "~/components/post/textContent";
export default {
  components: {
    cities,
    textContent,
  },
  data() {
    return {
      // 类型城市的数据
      psCtdata: [],
      // 文章列表数据
      textData: [],
      // 搜索文章地地址
      dizhi: "",
      pageIdex: 1,
      pageSize: 3,
      // 当前的页数
      page1: 1,
      // 输入框下面推荐城市数据
      ipCity: ["广州", "北京", "上海"],
    };
  },
  created() {
    // 获取类型城市
    this.$axios({
      url: "posts/cities",
    }).then((res) => {
      console.log("城市类型信息", res.data);
      this.psCtdata = res.data.data;
    });

    //推荐文章
    this.getData();
  },
  watch: {
    dizhi() {
      console.log(this.pageIdex);
      this.dianji(1);
      this.page1 = 1;
    },
  },
  methods: {
    // 获取全部文章函数封装
    getData() {
      this.$axios({
        url: "posts",
        params: {
          _start: (this.pageIdex - 1) * this.pageSize,
          _limit: this.pageSize,
        },
      }).then((res) => {
        console.log("推荐文章信息", res.data);
        this.textData = res.data;
        // res.data.data.forEach((element) => {
        //   this.textData.push(element);
        // });
      });
    },

    // 选择地页数
    dianji(pi) {
      this.pageIdex = pi;
      setTimeout(() => {
        if (this.dizhi) {
          this.getCity();
        } else {
          this.getData();
        }
      }, 300);
      console.log("选择的页码", pi);
    },
    // 改变每页显示的数量的函数
    newpageS(size) {
      this.pageSize = size;
      if (this.dizhi) {
        this.getCity();
      } else {
        this.getData();
      }
    },

    // 栏目选择的地址
    // 点击栏目选择城市触发事件
    chenshi(val) {
      console.log(val);
      this.dizhi = val;
      this.getCity();
    },
    // 输入框搜索触发事件
    getCity() {
      // 搜索输入框里面的地址
      this.$axios({
        url: "posts?city=" + this.dizhi,
        params: {
          _start: (this.pageIdex - 1) * this.pageSize,
          _limit: this.pageSize,
        },
      }).then((res) => {
        console.log("选择栏目地推荐文章信息", res.data);
        this.textData = res.data;
      });
      // 当没输入地址回车时 请求全部数据
      if (!this.dizhi) {
        // this.getData();
        // 还得触发选择的页面的函数
        this.dianji();
      }
    },

    // 输入框下面选择城市触发事件
    xuanzCity(index) {
      console.log(index);
      this.dizhi = this.ipCity[index];
    },
  },
};
</script>

<style lang="less" scoped>
.postBox {
  margin: 0 auto;
  max-width: 1000px;
  min-width: 920px;
  // height: 300px;
  // background-color: pink;
  padding: 25px 0;
  overflow: hidden;
  .lf {
    float: left;
    .xuanzlan {
      position: relative;
      width: 262px;
      // height: 162px;
      border: 1px solid #ddd;
      border-right: 0;
    }
    .tuijian {
      width: 260px;
      height: 216px;
      // border: 1px solid #e4e4e4;
      margin-top: 20px;

      .title {
        font-weight: 400;
        margin-bottom: 10px;
        padding-bottom: 10px;
        border-bottom: 1px solid #ccc;
      }
      img {
        width: 260px;
        height: 174px;
      }
    }
  }

  .rg {
    float: right;
    .daohan {
      position: relative;
      width: 700px;
      height: 76px;
      // border: 1px solid #e4e4e4;
      input {
        box-sizing: border-box;
        border: 3px solid orange;
        padding: 0 20px;
        outline: none;
        width: 100%;
        height: 40px;
        line-height: 40px;
      }
      .el-icon-search {
        position: absolute;
        top: 8px;
        right: 14px;
        font-size: 24px;
        color: orange;
        font-weight: 700;
      }
      .tj {
        margin: 10px 0;
        font-size: 12px;
        color: #666;
        .tj-content {
          margin: 0 5px;
          cursor: pointer;
          &:hover {
            color: orange;
            text-decoration: underline;
            // text-decoration: overline;
          }
        }
      }
    }
    .gonglue {
      .gl-header {
        width: 100%;
        overflow: hidden;
        padding-bottom: 10px;
        border-bottom: 1px solid #ccc;
        .gl-title {
          font-size: 18px;
          color: orange;
          line-height: 2.5;
          float: left;
          border-bottom: 2px solid orange;
        }
        .button {
          float: right;
        }
      }
      .tishi {
        text-align: center;
        margin: 20px 0;
      }
    }
  }
  .fengye {
    margin-top: 15px;
    text-align: center;
  }
}
</style>